<!--
 * @Author: your name
 * @Date: 2021-03-16 12:26:16
 * @LastEditTime: 2021-03-18 10:53:02
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\group\Offline.vue
-->
<template>
    <div>
        <el-dialog
        :title="$t('group.unLine.msg')"
        :visible="visibleShow2"
        width="1050px"
        @close="()=>{$store.commit('setVisibleShow2',false)}"
        :close-on-click-modal='false'
        >  
            <el-form ref="form" :model="form" label-width="185px" >
                <el-row :gutter="20" >
                    <el-col :span="11" :offset="0">
                        <el-form-item :label="$t('device-group-name')" >
                            {{form.groupName}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="11" :offset="0">
                        <el-form-item :label="$t('device-inv-nums')" >
                            {{form.inverterNum}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="11" :offset="0">
                        <el-form-item :label="$t('timeZone')" prop="timeZoneId" :rules="[{ required: true, message: $t('index_js_notNull')}]" >
                            <el-select v-model="form.timeZoneId" filterable :placeholder="$t('please_choose')" clearable style="width:100%">
                                <el-option
                                    v-for="item in tiemZoneList"
                                    :key="item.id"
                                    :label="item.timeZone"
                                    :value="item.timeZoneId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11" :offset="0">
                        <el-form-item :label="$t('group.unLine.time.period')"   :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-col :span="11" :offset="0">
                                <el-form-item prop="acceptTimeStart" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                    <el-time-select
                                    v-model="form.acceptTimeStart"
                                    :picker-options="{
                                        start: '00:00',
                                        step: '00:30',
                                        end: '24:00'
                                    }"
                                    style="width:100px;"
                                    >
                                    </el-time-select>
                                </el-form-item>
                            </el-col>
                            <el-col class="line" :span="2">-</el-col>
                            <el-col :span="11" :offset="0">
                                <el-form-item prop="acceptTimeEnd" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                    <el-time-select
                                    v-model="form.acceptTimeEnd"
                                    :picker-options="{
                                        start: '00:00',
                                        step: '00:30',
                                        end: '24:00'
                                    }"
                                    style="width:100px;"
                                    >
                                    </el-time-select>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                    </el-col>
                    <el-col :span="20" :offset="3">
                        <span style="color:red;">{{$t('group.unLine.sendNum.msg')}}</span>
                    </el-col>
                    <el-col :span="11" :offset="0">
                        <el-form-item :label="$t('group.unLine.number')" prop="offlineNumber" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-input v-model="form.offlineNumber" :placeholder="$t('pleaseInput')"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="20" :offset="0">
                        <el-form-item :label="$t('group.unLine.send.email')" prop="email" :rules="[{ required: false, message: $t('index_js_notNull')}]">
                            <el-input v-model="form.email" :placeholder="$t('alarmpush.alarmSend.js_placeholder')"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="()=>{$store.commit('setVisibleShow2',false)}">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="save('form')">{{$t('sure')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {

    },
    props: {
        editDataList:{
            type:Object,
            default:{}
        }
    },
    data() {
        return {
            form:{
                nation:'',
                groupName:'',
                inverterNum:'',
                timeZoneId:'',
                acceptTimeStart:'',
                acceptTimeEnd:'',
                offlineNumber:'',
                email:'',

            },
            tiemZoneList:[]
        };
    },
    computed: {
        visibleShow2(){
            return this.$store.state.sysStore.visibleShow2
        },
    },
    watch: {
        editDataList:{
            handler(nv,ov){
                if(nv){
                    this.form.groupName = nv.name
                    this.form.inverterNum = nv.num
                    // nv.acceptTimeStart&&nv.acceptTimeStart.split(':')[0]<10?'0'+nv.acceptTimeStart.split(':')[0]+":"+nv.acceptTimeStart.split(':')[1]:nv.acceptTimeStart
                    // nv.acceptTimeEnd&&nv.acceptTimeEnd.split(':')[0]<10?'0'+nv.acceptTimeEnd.split(':')[0]+":"+nv.acceptTimeEnd.split(':')[1]:nv.acceptTimeEnd
                    this.form.acceptTimeStart = nv.acceptTimeStart
                    this.form.acceptTimeEnd = nv.acceptTimeEnd
                    this.form.offlineNumber = nv.offlineAlarmNum
                    this.form.email = nv.email
                    this.form.timeZoneId = nv.timeZoneId || ''
                }
            },
            deep:true
        }
    },
    created() {

    },
    mounted() {
        this.timeZoneGetList()
    },
    methods: {
        async vppgroupAlarmSet(){
            let res = await this.API.vppgroupAlarmSet({
                acceptTimeStart:this.form.acceptTimeStart,
                id:this.editDataList.sid,
                acceptTimeEnd:this.form.acceptTimeEnd,
                timeZoneId:this.form.timeZoneId,
                offlineAlarmNum:this.form.offlineNumber,
                email:this.form.email,
            })
            if(this.comm.showMsg(res.success)){
                this.$emit('uploadData',true)
                this.$store.commit('setVisibleShow2',false)
                this.form.acceptTimeStart = ''
                this.form.acceptTimeEnd = ''
                this.form.offlineNumber = ''
                this.form.email = ''
                this.form.timeZoneId = ''
            }
        },
        async timeZoneGetList(){
            let res = await this.API.timeZoneGetList({
                 lang:localStorage.getItem('lang') || 'en_US'
            })
            this.tiemZoneList = res
        },
        save(formName){
            this.$refs[formName].validate((valid) => {
              if (valid) {
                  this.vppgroupAlarmSet()
              } else {
                console.log('error submit!!');
                return false;
                
              }
            });
        },
    },
};
</script>

<style  lang="less" scoped>

</style>
